<template>
	<view>
		<nav-bar ref="navBar" bgColor="['#f6ebd2','#efdbaf']" transparentFixedFontColor="#000" fontColor="#000" type="transparentFixed"
		 title="我的团队">

		</nav-bar>
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>
		<view class="bg_image_box" :style="{ paddingTop: statusBarHeight + 'px' }">
			<view class="my_team" v-if="recommendInfo !== null" @click="onBindVip">
				<view class="avatar_box">
					<image class="avatar" :src="recommendInfo.headImg" mode="aspectFill"></image>
					<image class="vip_img" src="../../../static/icon/shengBa/ic_biaoqian.png" mode="aspectFill"></image>
				</view>
				<view class="title_box">
					<view>我的上级</view>
					<view>{{recommendInfo.name}}（{{recommendInfo.memberRoleName}}）</view>
				</view>
			</view>
			<view class="my_team" v-else @click="applyPopup = true">
				<view class="avatar_box">
					<image class="avatar" src="../../../static/icon/ic_team_haed.png" mode="aspectFill"></image>
				</view>
				<view class="title_box">
					<view>请先绑定合伙人哦~</view>
				</view>
			</view>
		</view>
		<!-- 菜单 -->
		<view class="menu_box">
			<view :class="{ active: menuType == 1 }" @click="onSelectMenuType(1)">我的用户</view>
			<view :class="{ active: menuType == 2 }" @click="onSelectMenuType(2)">我的会员</view>
		</view>
		<view class="interval"></view>
		<!-- <mescroll-body ref="mescrollRef" height="-304" @init="mescrollInit" :down="downOption" @down="downCallback" @up="upCallback"> -->
		<!-- 团队列表 -->
		<view class="team_box">
			<view class="team_item" v-for="(item,index) of usersInfo.mySubordinateInfo" :key="index">
				<view class="avatar_box">
					<image class="avatar" :src="item.headImg" mode="aspectFill"></image>
					<image class="vip_img" v-if="menuType == 2" src="../../../static/icon/shengBa/ic_biaoqian.png" mode="aspectFill"></image>
				</view>
				<view class="name">{{item.name}}</view>
				<view class="name">({{item.memberRoleName}})</view>
			</view>
			<view class="total">
				共{{usersInfo.count}}个直接和间接下级
			</view>
		</view>


		<!-- </mescroll-body> -->
		<zPopup v-model="applyPopup" type="2000">
			<view class="bind_box">
				<view class="bind_title">
					绑定合伙人
				</view>
				<input type="text" v-model="code" placeholder="请输入邀请码" placeholder-class="grey" />
				<view class="tips">
					绑定合伙人后将不可更改
				</view>
				<view class="btn_box">
					<button @click="applyPopup = false">取消</button>
					<button class="active" @click="onSubmit">确定</button>
				</view>

			</view>
		</zPopup>
	</view>
</template>
<script>
	// import MescrollMixin from "@/components/common/mescroll-uni/mescroll-mixins.js";
	import zPopup from '@/components/common/popup.vue';
	export default {
		// mixins: [MescrollMixin], // 使用mixin (在main.js注册全局组件)
		components: {
			zPopup
		},
		data() {
			return {
				statusBarHeight: 0,
				applyPopup: false,
				code: '',
				menuType: 1,
				type: true,
				usersInfo: {},
				recommendInfo: ''
			};
		},
		//第一次加载
		onLoad(e) {
			this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight'];
			this.loadData();
		},
		//页面显示
		onShow() {},
		//方法
		methods: {
			// 菜单筛选
			onSelectMenuType(menuType) {
				this.menuType = menuType;
				this.loadData();
				// this.mescroll.triggerDownScroll();
			},
			onBindVip() {
				if (this.recommendInfo.level > 2) {
					uni.showToast({
						title: '无法更换推荐人',
						icon: 'none'
					});
				} else {
					this.applyPopup = true;
				}
			},
			loadData() {
				if (this.menuType == 1) {
					this.type = true;
				} else if (this.menuType == 2) {
					this.type = false;
				}
				this.$http.get('api/mime/recommend/v1/team', {
					type: this.type
				}).then(res => {
					this.usersInfo = res;
					this.recommendInfo = res.recommendInfo;
				})
			},
			onSubmit() {
				let _this = this;
				if (!this.code) {
					uni.showToast({
						title: '请输入邀请码',
						icon: 'none'
					});
					return;
				}
				this.$http.get('api/open/v1/bind_vip', {
					inviteCode: this.code
				}).then(res => {
					console.log("1111");
					uni.showModal({
						title: '提示',
						content: '绑定成功',
						showCancel: false,
						success: function(res) {
							if (res.confirm) {
								console.log("2222");
								_this.applyPopup = false;
								_this.loadData();
							}
						}
					});
					// uni.showToast({
					// 	title: '绑定成功',
					// 	icon: 'none'
					// });
				})

			}
		},
		//页面隐藏
		onHide() {},
		//页面卸载
		onUnload() {},
		//用户点击分享
		onPageScroll(e) {
			this.$refs.navBar.pageScroll(e);
		},
		onShareAppMessage(e) {
			return this.wxShare();
		}
	};
</script>
<style lang="scss" scoped>
	@import '@/style/mixin.scss';

	.interval {
		height: 88rpx;
	}

	.bind_box {
		width: 590rpx;
		background-color: #ffffff;
		border-radius: 8rpx;
		padding: 40rpx;
		display: flex;
		flex-direction: column;
		align-items: center;

		.bind_title {
			font-size: 32rpx;
			color: #333333;
		}

		input {
			margin-top: 40rpx;
			width: 510rpx;
			height: 88rpx;
			border-radius: 8rpx;
			border: solid 1rpx #e5e5e5;
			text-align: center;
			font-size: 28rpx;
		}

		.grey {
			color: #cccccc;
		}

		.tips {
			margin-top: 24rpx;
			font-size: 24rpx;
			color: #ff3e3e;
		}

		.btn_box {
			margin-top: 40rpx;

			width: 100%;
			display: flex;
			justify-content: space-between;

			button {
				font-size: 28rpx;
				line-height: 88rpx;
				width: 245rpx;
				height: 88rpx;
				border-radius: 8rpx;
				border: solid 1rpx #e5e5e5;
				color: #333333;

				&.active {
					@include theme('gradient_bg');
					color: #fff;
					border: none;
				}
			}
		}
	}

	.bg_image_box {
		background-image: linear-gradient(90deg,
			#f6ebd2 0%,
			#efdbaf 100%);

		.my_team {
			display: flex;
			align-items: center;
			padding: 40rpx;
			padding-top: 128rpx;

			.avatar_box {
				position: relative;

				.avatar {
					width: 120upx;
					height: 120upx;
					border-radius: 50%;
					border: 1rpx solid #fff;
				}

				.vip_img {
					position: absolute;
					width: 41rpx;
					height: 35rpx;
					right: 0;
					bottom: 0;

				}
			}

			.title_box {
				height: 100rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				margin-left: 24rpx;

				view {
					font-size: 28rpx;
					color: #8e611f;

					&:nth-child(2) {
						margin-top: 20rpx;
					}
				}
			}
		}
	}

	.menu_box {
		height: 88rpx;
		background-color: #ffffff;
		padding: 31rpx 48rpx 10rpx;
		border-bottom: 1rpx solid #e5e5e5;
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: fixed;
		left: 0;
		width: 100%;
		z-index: 2;

		>view {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			font-size: 28rpx;
			color: #8e611f;
			opacity: 0.6;

			&::after {
				content: '';
				width: 40rpx;
				height: 6rpx;
				margin-top: 24rpx;
			}

			&.active {
				opacity: 1;

				&::after {
					content: '';
					width: 32rpx;
					height: 6rpx;
					background-color: #8e611f;
					border-radius: 3rpx;
					margin-top: 18rpx;
				}
			}
		}
	}

	.team_item {
		background-color: #fff;
		padding: 25rpx 32rpx;
		display: flex;
		align-items: center;
		border-bottom: 1rpx solid #e5e5e5;

		&:nth-last-child(2) {
			border-bottom: none;
		}

		.avatar_box {
			position: relative;

			.avatar {
				width: 60upx;
				height: 60upx;
				border-radius: 50%;
				border: 1rpx solid #fff;
			}

			.vip_img {
				position: absolute;
				width: 20rpx;
				height: 18rpx;
				right: 0;
				bottom: 0;
			}
		}

		.name {
			font-size: 24rpx;
			color: #333333;
			margin-left: 24rpx;
		}

	}

	.total {
		margin-top: 40rpx;
		font-size: 24rpx;
		color: #999999;
		text-align: center;
	}
</style>
